<template>
	<div class="fl">
		<!--input select 可配置单选多选 -->
		<div class="down_search_wrap">
			<div class="search_btn_wrap" style="width: 150px;">
				<el-button class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
				<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
			</div>
			<div v-for="item in config.search_input" class="input_wrap">
				<label class="label" for="">{{item.placeholder}}：</label>
				<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small">
				</el-input>
			</div>
			<div class="select_input_wrap" v-for="items in config.search_select">
				<label class="label" for="">{{items.placeholder}}：</label>
				<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
					<el-option v-for="item in data.received.search[items.name]" :key="item.label" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<!-- 日期时间范围 -->
			<div class="riqi_wrap">
				<label class="label">时间：</label>
				<el-date-picker v-if="config.date" v-for="itemDate in config.date" v-model="data.exchanged.date[itemDate.name]" :type="itemDate.type" :range-separator="itemDate.separator" :size="itemDate.size" :start-placeholder="itemDate.placeholder+'开始'" :end-placeholder="itemDate.placeholder+'结束'" @change="handleDateChange(data.exchanged.date[itemDate.name], itemDate)" align="right" value-format="yyyy-MM-dd" placeholder="选择日期">
				</el-date-picker>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/assets/js/http.js'
	
	export default {
		props: ['config', 'data'],
		data() {
			return {
				tempDate: null,
				pickerOptions2: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				}
			}
		},
		created() {
			// 处理配置文件 生成相应的数据容器
		},
		methods: {
			searchBtn() {
				this.apiGet(data.exchanged.searchApi+'?', null).then(res => {
					if(res.code == 200) {
						this.data.received.table = res.data.roles
						this.data.received.count = res.data.roles.length
						_g.closeGlobalLoading();
					}
				})
			},
			handleDateChange(date, item) {
				console.log('date', date)
				if(date === null) {
					this.data.exchanged.search[item.name] = ''
					return true
				}
				if(date === '') {
					return true
				}
				this.data.exchanged.search[item.name] = date
				return true
				let start = new Date(date[0])
				let separator = item.separator
				let end = new Date(date[1])
				let startString =
					start.getFullYear() +
					'-' +
					(start.getMonth() + 1) +
					'-' +
					start.getDate() +
					' ' +
					start.getHours() +
					':' +
					start.getMinutes() +
					':' +
					start.getSeconds()
				let endString =
					end.getFullYear() +
					'-' +
					(end.getMonth() + 1) +
					'-' +
					end.getDate() +
					' ' +
					end.getHours() +
					':' +
					end.getMinutes() +
					':' +
					end.getSeconds()
				let resDate = startString + separator + endString
				this.data.exchanged.search[item.name] = resDate
				console.log('this.data.exchanged.search[item.name]', this.data.exchanged.search[item.name])
				//                // 日期查询
			}
		},
		
		mixins: [http]
	}
</script>

<style scoped>
	.input_search {
		padding: 0 20px 0px 20px;
	}
	
	.input_search .el-row {
		margin: 20px 0;
		text-align: center;
	}
	
	.input_search .el-input,
	.input_search .el-input__inner {
		width: 340px !important;
	}
	
	label {
		color: rgba(0, 0, 0, 0.647059);
		font-size: 14px;
	}
	
	.riqi_wrap {
		float: left;
		white-space: nowrap;
		line-height: 46px;
	}
	.input_wrap,
	.select_input_wrap {
		float: left;
		margin-right: 46px;
		line-height: 46px;
	}
	
	
	.input_wrap .label, .riqi_wrap .label, .select_input_wrap .label {
		text-align: right;
		width: 90px;
		display: inline-block;
	}
	
	.el-select,
	.el-input {
		width: 160px;
	}
	
	.down_search_wrap {
		background: #FFFFFF;
		margin-bottom: 20px;
		padding: 20px;
		border-radius: 6px;
		overflow: hidden;
	}
	
	.el-date-editor--datetimerange.el-input,
	.el-date-editor--datetimerange.el-input__inner {
		width: 340px;
	}
	
	.search_btn_wrap {
		float: right;
		line-height: 46px;
	}
</style>
<style type="text/css">
	.riqi_wrap .el-input__inner {
		width: 160px;
	}
</style>